import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import { getImgUrl } from '../../utils/ComFunction'

const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';
/**
 * 附件图片
 */
export default class CredentialImage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            drivingLicensePics: [],
            carRegisterPics: [],
            idPics: [],
            otherPics: [],

            isCheckLicensePic: false,
            isCheckCarRegisterPic: false,
            isCheckIdPic: false,
            isCheckOtherPic: false
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }


    componentDidMount() {
        console.log('picsData', this.props.picsData)
        if (this.props.picsData) {
            //处理图片数据

            let otherCertPics = this.props.picsData.otherCertPics

            let temp = []
            otherCertPics.map((item, index) => {
                let obj = {
                    picUrl: item,
                    check:false
                }
                temp.push(obj)
            })

            this.setState({
                drivingLicensePics: this.props.picsData.drivingLicensePics,
                carRegisterPics: this.props.picsData.carRegisterPics,
                idPics: this.props.picsData.idPics,
                otherPics: temp
            },function(){
                this.showPreSelectData()
            })
            
        }
    }

    showPreSelectData(){
        console.log('this.props.fileList',this.props.fileList)
        let that = this
        if(this.props.fileList && this.props.fileList.length > 0){
            let fileList = this.props.fileList

            let isCheckLicensePic = false
            let isCheckCarRegisterPic = false
            let isCheckIdPic= false

            fileList.map((item,index) => {
                if(item.title == '车辆行驶证'){
                    isCheckLicensePic = true
                }else if(item.title == '车辆登记证'){
                    isCheckCarRegisterPic = true
                }else if(item.title == '身份证'){
                    isCheckIdPic = true
                }else if(item.title == '其他证件'){
                    that.initOtherPics(item.value)
                }
            })

            this.setState({
                isCheckLicensePic:isCheckLicensePic,
                isCheckCarRegisterPic:isCheckCarRegisterPic,
                isCheckIdPic:isCheckIdPic
            })
        }
    }

    initOtherPics(otherPics){
        let otherPicsStr = JSON.stringify(otherPics)

        let temp = []
        let otherCertPics = this.state.otherPics
        otherCertPics.map((item, index) => {

            if(otherPicsStr.indexOf(item.picUrl) != -1){
                item.check = true
            }
            temp.push(item)
        })

        this.setState({
            otherPics: temp
        })
    }

    render() {
        return (
            <View style={styles.container}>

                <View style={styles.itemContain}>
                    <TouchableOpacity style={styles.itemTitleContain}
                        onPress={() => {
                            if (this.state.drivingLicensePics.length > 0) {
                                this.setState({
                                    isCheckLicensePic: !this.state.isCheckLicensePic
                                })
                            }
                            
                        }}>
                        <Image style={styles.checkImg} source={{ uri: this.state.isCheckLicensePic ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image>
                        <Text style={styles.itemTitleText}>车辆行驶证照片</Text>

                    </TouchableOpacity>

                    <View style={styles.imgContain}>
                        {this.state.drivingLicensePics && this.state.drivingLicensePics.length > 0 ? this.state.drivingLicensePics.map((item, index) => {
                            return (
                                <Image key={index} style={styles.imgStyle} source={{ uri: getImgUrl(item) }}></Image>
                            )
                        })
                            :
                            <Text style={styles.notUploadText}>未上传车辆行驶证照片</Text>
                        }
                    </View>
                </View>

                <View style={styles.itemContain}>
                    <TouchableOpacity style={styles.itemTitleContain} onPress={() => {

                        if (this.state.carRegisterPics.length > 0) {
                            this.setState({
                                isCheckCarRegisterPic: !this.state.isCheckCarRegisterPic
                            })
                        }
                        
                    }}>
                        <Image style={styles.checkImg} source={{ uri: this.state.isCheckCarRegisterPic ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image>
                        <Text style={styles.itemTitleText}>车辆登记证照片</Text>

                    </TouchableOpacity>

                    <View style={styles.imgContain}>
                        {this.state.carRegisterPics && this.state.carRegisterPics.length > 0 ? this.state.carRegisterPics.map((item, index) => {
                            return (
                                <Image key={index} style={styles.imgStyle} source={{ uri: getImgUrl(item) }}></Image>
                            )
                        })
                            :
                            <Text style={styles.notUploadText}>未上传车辆登记证照片</Text>
                        }

                    </View>
                </View>

                <View style={styles.itemContain}>
                    <TouchableOpacity style={styles.itemTitleContain} onPress={() => {
                        if (this.state.idPics.length > 0) {
                            this.setState({
                                isCheckIdPic: !this.state.isCheckIdPic
                            })
                        }
                        
                    }}>
                        <Image style={styles.checkImg} source={{ uri: this.state.isCheckIdPic ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image>
                        <Text style={styles.itemTitleText}>身份证照</Text>

                    </TouchableOpacity>

                    <View style={styles.imgContain}>
                        {this.state.idPics && this.state.idPics.length > 0 ? this.state.idPics.map((item, index) => {
                            return (
                                <Image key={index} style={styles.imgStyle} source={{ uri: getImgUrl(item) }}></Image>
                            )
                        })
                            :
                            <Text style={styles.notUploadText}>未上传身份证照</Text>
                        }

                    </View>
                </View>

                <View style={styles.itemContain}>
                    <TouchableOpacity style={styles.itemTitleContain} onPress={() => {
                        
                    }}>
                        {/* <Image style={styles.checkImg} source={{ uri: this.state.isCheckOtherPic ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image> */}
                        <Text style={styles.itemTitleText}>其他证件照片</Text>

                    </TouchableOpacity>

                    <View style={styles.imgContain}>
                        {this.state.otherPics && this.state.otherPics.length > 0 ? this.state.otherPics.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    key={index}
                                    onPress={() => { 
                                        let temp = this.state.otherPics
                                        temp[index].check = !temp[index].check
                                        this.setState({
                                            otherPics: temp
                                        })
                                    }}>
                                    <Image  style={styles.imgStyle} source={{ uri: getImgUrl(item.picUrl) }}></Image>
                                     <Image style={styles.imgCheckStyle} source={{uri: item.check ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2'}}></Image>
                                </TouchableOpacity>
                                
                            )
                        })
                            :
                            <Text style={styles.notUploadText}>未上传其他证件照片</Text>
                        }

                    </View>
                </View>



            </View>
        );
    }


    getResult() {
        let result = []
        
        if (this.state.isCheckLicensePic) {
            let value = {
                title:'车辆行驶证',
                value: this.state.drivingLicensePics
            }
            result.push(value)
        }
        if (this.state.isCheckCarRegisterPic) {
            let value = {
                title:'车辆登记证',
                value: this.state.carRegisterPics
            }
            result.push(value)
        }
        if (this.state.isCheckIdPic) {
            let value = {
                title:'身份证',
                value: this.state.idPics
            }
            result.push(value)
        }

        let otherCertPics = []
        this.state.otherPics.map((item, index) => {
            if (item.check) {             
                otherCertPics.push(item.picUrl)
            }
        })
        if(otherCertPics.length > 0){
            let othervalue = {
                title:'其他证件',
                value: otherCertPics
            }
            result.push(othervalue)
        }
        
        return result
    }


}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#ffffff',
        marginTop: 10
    },
    itemContain: {
        paddingLeft: 16,
        paddingRight: 16,
    },

    itemTitleContain: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 5

    },
    checkImg: {
        width: 20,
        height: 20
    },
    itemTitleText: {
        fontSize: 14,
        color: '#222222',
        marginLeft: 10
    },

    notUploadText: {
        fontSize: 14,
        color: '#999999'
    },

    imgContain: {
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 30,
        flexWrap: 'wrap'
    },

    imgStyle: {
        width: 75,
        height: 75,
        borderRadius: 4,
        marginRight: 15,
        marginTop: 10,
    },
    imgCheckStyle:{
        width:20,
        height:20,
        position:'absolute',
        right:16,
        top:14
    }
    

})